<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="logo flex j-center a-center">
					<view>任务大厅</view>
				</view>
				<view class="flex a-center search" @tap="goto('/pages/search')">
					<view class="s-icon">
						<image class="image" src="../static/icon/idx/idx(5).png"></image>
					</view>
					<view>搜索任务</view>
				</view>
				<view class="msg">
					<image class="image" src="../static/icon/idx/idx(4).png"></image>
				</view>
			</view>
		</view>
		<view class="menus">
			<u-tabs :font-size="32" :list="menus" bg-color="transparent" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="my-swiper">
			<u-swiper :list="list" :height="320"></u-swiper>
		</view>
		<view class="task">
			<scroll-view :scroll-x="true">
				<view class="scroll flex j-between a-center" :style="[taskStyle(task.length)]">
					<view class="t-item flex col j-center a-center" v-for="(item,i) in task" :key="i">
						<view class="box flex j-center a-center">
							<image class="image" :src="item.icon"></image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view>
			<task-item v-for="(item,i) in jx_task" :key="i" :item="item"></task-item>
		</view>
	</view>
</template>

<script>
	import taskItem from './components/task-item.vue'
	export default {
		components:{taskItem},
		data() {
			return {
				keyword:'',
				list:[
					'https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
					'https://cdn.uviewui.com/uview/swiper/3.jpg'
				],
				menus:[{name:'砍价助力'},{name:'打赏悬赏'},{name:'张贴海报'}],
				current:0,
				task:[
					{icon:'https://cdn.uviewui.com/uview/common/logo.png',name:'拼多多'},
					{icon:'https://cdn.uviewui.com/uview/common/logo.png',name:'拼多多'},
					{icon:'https://cdn.uviewui.com/uview/common/logo.png',name:'拼多多'},
					{icon:'https://cdn.uviewui.com/uview/common/logo.png',name:'拼多多'},
					{icon:'https://cdn.uviewui.com/uview/common/logo.png',name:'拼多多'}
				],
				jx_task:[
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:0,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:1,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'}
				]
			}
		},
		methods: {
			top(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:pdt+'px'}
			},
			ctop(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:(pdt+44)+'px'}
			},
			change(i){
				this.current = i
			},
			taskStyle(count){
				return {width:count*165+'rpx'}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;background-color: #F9F9F9;left:0;top:0;z-index: 10;
	.logo{height: 52rpx;font-size: 36rpx;font-weight: bold;color:#333;}
	.search{color: #999;font-size: 28rpx;background-color: #F2F2F2;border-radius: 200rpx;
		padding: 0 24rpx;height: 72rpx;width: 418rpx;
		.s-icon{width: 34.12rpx;height: 34.12rpx;margin-right: 22rpx;}
	}
	.msg{width: 44rpx;height: 44rpx;}
}
.my-swiper{width: 702rpx;height: 320rpx;margin: 24rpx auto 0;}
.notice{background-color: #FFF;border-radius: 16rpx;height: 88rpx;padding: 0 24rpx;margin-top: 24rpx;
	.n-icon{width: 118rpx;height: 42rpx;}
	.n-list{width: 600rpx;}
}
.menus{}
.task{height: 248rpx;border-radius: 16rpx;background-color: #FFF;margin: 24rpx 0;padding: 48rpx 24rpx;
	.scroll{height: 152rpx;}
	.box{width: 120rpx;height: 88rpx;overflow: hidden;
		box-shadow: 0rpx 12rpx 12rpx rgba(221, 36, 36, 0.16);opacity: 1;border-radius: 44rpx;
		.t-icon{width:60rpx;height: 60rpx;}
	}
	.name{color: #333;font-size: 28rpx;margin-top: 24rpx;}
}
</style>
